<template>
  <div class="caiji">
    <div class="wanguan litt">
      <div class="title">
          <div class="label"></div>
          <div class="text">采集情况</div>
      </div>
      <div class="labelandech">
        <div class="label">
          <div class="online content">
            <div class="text"><div>网关</div> <div>{{entityinfo.gatewaySum}} 台</div></div>
            <div class="text"><div>在线</div> <div>{{entityinfo.gatewayOnline}} 台</div></div>
            <div class="text"><div>离线</div> <div>{{entityinfo.gatewayOffline}} 台</div></div>
          </div>
          <div class="online content">
            <div class="text"><div>监测仪表</div> <div>{{entityinfo.meterSum}} 台</div></div>
            <div class="text"><div>在线</div> <div>{{entityinfo.meterOnline}} 台</div></div>
            <div class="text"><div>离线</div> <div>{{entityinfo.meterOffline}} 台</div></div>
          </div>
        </div>
        <div class="label">
          <div class="online" ref="caijirefs"></div>
          <div class="online" ref="jiancerefs"></div>
        </div>
      </div>
    </div>
    <div class="qiandao litt">
      <div class="title">
          <div class="label"></div>
          <div class="text">签到</div>
      </div>
      <div class="gecode">
        <div class="code" v-for="(item,index) in codelist" :key="index">
          <div class="name">{{ item.signPerson }}</div>
          <div class="time">{{ item.signTime?item.signTime:'-' }}</div>
          <div class="address">{{ item.signAddress?item.signAddress:'-' }}</div>
          <div class="status">{{ item.signStatus }}</div>
          <div class="status">
            <el-link :disabled="item.fileContent?false:true"  :underline="false" type="primary" @click="lookimg(item.fileContent)">附件</el-link>
          </div>
        </div>
        <el-dialog  :visible.sync="dialogVisible" >
            <img :src="'data:image/png;base64,' + fileContent" alt="" width="100%">
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import {getcaijiinfoapi,getqiandaoinfoapi} from '@/api/ElectricalDistribution/operation'
import {GetEcharts} from '@/utils/echarts.js'
export default {
  name: 'CallPoliceCaiJi',
  props: {
    logoinfo: {
      type: Object,
      default:()=>{}
    }
  },
  data() {
    return {
      fileContent:'',
      codelist:[],
      entityinfo: {},
      dialogVisible:false
    };
  },

  mounted() {
    
    
  },

  methods: {
    lookimg(val) {
      this.dialogVisible=true
      this.fileContent=val
    },
    getpieech(dom,number,text,color) {
      let option = {
        title: [
          {
            text: number+'%',
            x: 'center',
            y: '35%',
            textStyle: {
              fontSize: 18,
              color: color,
              fontWeight: 'bold',
            },
          },
          {
            text: text,
            x: 'center',
            y: '52%',
            borderColor: '#fff',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 10,
              color: '#444',
            },
          },
        ],
        polar: {
          center: ['50%', '50%'],
          radius: ['70%', '90%'],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [number],
            name: '',
            type: 'bar',
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: '#a1bbd2',
            },
            coordinateSystem: 'polar',
            itemStyle: {
              color:color
            },
          },
        ],
      }
      GetEcharts(this,dom,option)
    }
  },
  watch: {
    logoinfo: {
      deep: true,
      async handler(newValue, oldValue) {
        if (newValue.orgNo) {
          const { data:{entity}} = await getcaijiinfoapi({ buro: this.logoinfo.orgNo })
          this.entityinfo = entity
          const { data: { list } } = await getqiandaoinfoapi({ buro: this.logoinfo.orgNo })
          this.codelist=list
          this.getpieech(this.$refs.caijirefs,entity.gatewayOnlineRate,'采集器在线率','#3090ff')
          this.getpieech(this.$refs.jiancerefs,entity.meterOnlineRate,'仪表在线率','#13ccad')
        }
      }
    }
  }
};
</script>
<style scoped>
.caiji{
  height:100%;
  display: flex;
  .wanguan{
    width:40%;
    height:100%;
    margin-right:10px;
    background-color:#fff;
  }
  .labelandech{
    height: 90%;
    display: flex;
    .label{
      width: 50%;
      .online{
        height: 50%;
        .text{
           font-size: 14px;
           margin: 10px 0;
           display: flex;
           justify-content: space-between;
        }
      }
      .content{
        padding-top: 20px;
      }
    }
  }
  .qiandao{
    width: calc(60% - 10px);
    height:100%;
    background-color:#fff;
    .gecode{
      height: 89%;
      padding-top: 10px;
      overflow-y: auto;
      .code{
        font-size: 14px;
        display: flex;
        padding-right: 10px;
        margin-bottom: 5px;
        /* justify-content: space-between; */
        .name{
          width: 16%;
        }
        .time{
          width: 29%;
        }
        .address{
          width: 35%;
        }
        .status{
          width: 10%;
          text-align: right;
        }
      }
    }
  }
  .litt{
    padding:20px;
    .title{
        display: flex;
        .label{
          width: 4px;
          height: 20px;
          background-color: #5087ec;
          margin-right: 10px;
        }
        .text{
          color: #5087ec;
          font-weight: bold;
        }
      }
  }
}
</style>